import { project, information, description, photo, teachervideo, checkFile, teacheKnowledge } from '/views/teachinformationregister/teacher/teacherinformation.js';

export function createMyFile() {
    return new Promise(async (resolve) => {

        let wrap = document.createElement('div')
        wrap.style.cssText = 'background-color: rgb(237, 239, 240);width: 100%;height: 100%;overflow-x: hidden;'
        wrap.className = 'component-wrap'
        let component = document.createElement('div')
        component.className = 'component-setting'
        let left = document.createElement('div')
        left.className = 'setting-menu '


        $(async function () {

            let params = {
                // token: localStorage.getItem('Token'),
            }

            let res = await ajax('query_teacher_background', params, 'post');



            if (res && res.data) {

                return left.innerHTML = `
                <div data-type='introduce' class='menu-active'>介绍</div>
                <div data-type='image'>照片</div>
                <div data-type='description'>描述</div>
                <div data-type='video'>视频</div>
                <div data-type='subject'>担当科目</div>
                  <div data-type='teacheKnowledge'>教学知识</div>
                 `
            } else {

                return left.innerHTML = `
                    <div data-type='introduce' class='menu-active'>介绍</div>
                    <div data-type='image'>照片</div>
                    <div data-type='description'>描述</div>
                    <div data-type='video'>视频</div>
                    <div data-type='subject'>担当科目</div>
                    <div data-type='background'>个人背景</div>
                    <div data-type='teacheKnowledge'>教学知识</div>
             `

            }
        })

        // left.innerHTML = `
        //     <div data-type='introduce' class='menu-active'>介绍</div>
        //     <div data-type='image'>照片</div>
        //     <div data-type='description'>描述</div>
        //     <div data-type='video'>视频</div>
        //     <div data-type='subject'>担当科目</div>
        //     <div data-type='background'>个人背景</div>
        // `
        let right = document.createElement('div')
        right.className = 'teach-container'
        right.classList.add("animated", "fadeInDown")
        component.appendChild(left)
        component.appendChild(right)
        wrap.appendChild(component)
        $('.body')[0].appendChild(wrap)


        let listener = () => {
            $('.setting-menu')[0].addEventListener('click', (e) => {
                if (e.target.dataset.type) {
                    let type = e.target.dataset.type
                    clearRight()
                    userSettingMap[type]()
                    if (type === 'payType') { bindCardListener(); maskListener() }
                    Array.from($(e.target).parent()[0].children).forEach(item => {
                        if (item.dataset.type === type) {
                            item.className = 'menu-active'
                            item.classList.add("animated", "tada")
                        } else {
                            item.className = ''
                        }
                    })
                    component = type
                }

            })
        }

        listener()
        createIntroduce()

        setTimeout(() => {
            $('.component-wrap')[0].style.opacity = 1
            resolve('ok')
        })

    })
}

let createIntroduce = async () => {
    teacher();
    information(true);
    window.onload = () => {
        $('.check-flex')[1] && $('.check-flex')[1].remove()
        $('.lang-box-first')[0].children[0].style.width = 'auto'
        $('.lang-box-first')[0].children[1].style.width = 'auto'
    }

}

let createImage = () => {
    teacher();
    photo(true);

}

let createDesecription = () => {
    teacher();
    description(true);
}

let createVideo = () => {
    teacher();
    teachervideo(true);
}

let createSubject = () => {
    teacher();
    project();
}


let createPeopleBackground = () => {
    teacher();
    checkFile();
}
let createPeopleteacheKnowledge = () => {
    teacher();
    teacheKnowledge();
}


let clearRight = () => {
    $('.teach-container')[0].innerHTML = ''
    // $('.setting-account')[0] && $('.setting-account')[0].remove()
    // $('.setting-pwd')[0] && $('.setting-pwd')[0].remove()
    // $('.setting-pay-history')[0] && $('.setting-pay-history')[0].remove()
    // $('.setting-class-auto')[0] && $('.setting-class-auto')[0].remove()
    // $('.setting-calendar-google')[0] && $('.setting-calendar-google')[0].remove()
    // $('.setting-notice')[0] && $('.setting-notice')[0].remove()
}

let userSettingMap = {
    'introduce': createIntroduce,
    'image': createImage,
    'description': createDesecription,
    'video': createVideo,
    'subject': createSubject,
    'background': createPeopleBackground,
    'teacheKnowledge': createPeopleteacheKnowledge,
}

